<template>
    <div class="myHeader" v-for="(item,index) in list" :key="index">
      <b>{{item.name}}</b>
      <ul>
          <li v-for="(n,i) in item.values" :key="i" @click="check(index,n)" :class="{active: $store.state.checkHead.some(el => el == n) || $store.state.checkColor.some(el => el == n) }">{{n}}</li>
      </ul>
    </div>
    <button style="margin-top:20px" @click="$store.commit('delAll')">重置</button>
</template>
<script>
import { useStore } from 'vuex';
export default {
    props:{
      list: Array
    },
    setup() {
      const store = useStore();
      const check = (i,val) => {
        //   console.log(i);
        //   console.log(val);
         if (i == 0) {
           store.commit('addHead', val);
         } else {
           store.commit('addColor', val);
         }
         
      }
      return {
         check 
      }
    }
}
</script>
<style lang="scss" scoped>
    .myHeader{
      display: flex;
      height: 50px;
      border-bottom:1px solid #000;
      align-items: center;
    }
    .active{
        background: red;
        color: #fff;
    }
    li{
        list-style: none;
        display: inline-block;
        width: 50px;
        line-height: 30px;
        border: 1px solid #ccc;
        border-radius: 4px;
        text-align: center;
        margin-right: 10px;
        cursor: pointer;
    }

</style>